<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    :dialogWidth="dialogWidth"
  >
    <template #searchPanel>
      <el-row :gutter="20">
        <search-panel
        v-slot="{ form }"
        @search="search"
        @send="findBusinessSet"
        :showExportButton="true"
        @export="handleDataExport('Chance','商机信息导出')"
        :showAddButton="false"
        :showSendButton="true"
        sendButtonTitle="商机设置"
        :excelPer="'chance:chanceSet'" :selectPer="'chance:page'">
          <el-select clearable style="width: 200px"  v-model="form.chanceType" placeholder="商机类型">
            <el-option
              v-for="item in dict['商机类型']"
              :key="item.index"
              :value="item.value"
              :label="item.text"
            />
          </el-select>
          <el-select clearable style="width: 200px"  v-model="form.memberGrade" placeholder="会员等级">
            <el-option
              v-for="item in dict['会员等级']"
              :key="item.index"
              :value="item.value"
              :label="item.text"
            />
          </el-select>
          <el-select clearable style="width: 200px"  v-model="form.clientType" placeholder="客户类型">
            <el-option
              v-for="item in dict['客户类型']"
              :key="item.index"
              :value="item.value"
              :label="item.text"
            />
          </el-select>
          <el-input clearable style="width: 200px;" v-model="form.likeName" placeholder="客戶姓名/手机号"/>
        </search-panel>
      </el-row>
    </template>
    <template #contentPanel>
      <data-table
        @row-dblclick="findDetails"
        :value="tableData"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :width="160"
        :isShowPage="true"
      >
        <template #action="{row}">
          <i class="el-icon-edit" title="商机跟进" style="margin-left: 20px;cursor: pointer" v-permission="'chance:followUpSave'" @click="handleDataChange(row, '添加跟进信息')"></i>
          <i class="el-icon-edit-outline" title="商机处理" style="margin-left: 20px;cursor: pointer" v-permission="'chance:dispose'" @click="handleDisposeDataChange(row, '添加跟进信息')"></i>
          <i class="el-icon-delete" title="删除" style="color:red; margin-left: 20px;cursor: pointer" v-permission="'chance:del'" @click="handleDataDelete(row)"></i>
        </template>
      </data-table>
      <!--工具条-->
      <template>
        <el-dialog title="商机设置" :visible.sync="showDeleteVisible" width="600px">
          <business-set-form :value="dialogData" :menus="dict" @operate="handleSetDataOperate"/>
        </el-dialog>
      </template>
      <template>
        <el-dialog title="商机处理" :visible.sync="showDisposeVisible" width="600px">
          <dispose-data-form :value="dialogData" :menus="dict" @operate="handleDisposeDataOperate"/>
        </el-dialog>
      </template>
      <template>
        <el-dialog title="商机详情" :visible.sync="showDetailsVisible" width="1000px">
          <details-data-form :value="dialogData" :menus="dict" @operate="handleDisposeDataOperate"/>
        </el-dialog>
      </template>

    </template>
    <template #dialog>
      <dialog-data-form :value="dialogData" @operate="handleDataOperate"/>
    </template>
  </base-layout>
</template>

<script>
  import { chanceList, deleteChance, getChanceById, chanceFollowUpSave, disposeChance, chanceSetChance } from '@/api/after-sale/client/business'
  import baseMixin from '@/mixins/base'
  import { getDict } from '@/utils'
  import DialogDataForm from './components/DialogDataForm.vue'
  import BusinessSetForm from './components/BusinessSetForm'
  import DisposeDataForm from './components/DisposeDataForm'
  import DetailsDataForm from './view/index'
  export default {
    components: {
      DetailsDataForm,
      DisposeDataForm,
      BusinessSetForm,
      DialogDataForm
    },
    mixins: [
      baseMixin({
        findDataById: getChanceById,
        findData: chanceList,
        deleteData: deleteChance,
        addData: chanceFollowUpSave,
        exportData: '',
        dataName: ['content', 'totalRecords'],
        isAdd: false,
        idName: 'id',
        format(res) {
          return res.map(data => {
            return data
          })
        }
      })
    ],
    data() {
      return {
        dict: {},
        dialogVisible: false,
        showDeleteVisible: false,
        showDisposeVisible: false,
        showDetailsVisible: false,
        communitys: [],
        dialogWidth: '700px',
        tableColumnAttributes: [
          { name: '所属门店', value: 'storeName', type: 'text', width: '200px' },
          { name: '商机编号', value: 'code', type: 'text', width: '100px' },
          { name: '客户名称', value: 'clientName', type: 'text' },
          { name: '手机号', value: 'phone', type: 'text', width: '120px' },
          { name: '驾驶证号', value: 'drivingLicenceNumber', type: 'text', width: '200px' },
          { name: '车牌号', value: 'licensePlateNumber', type: 'text' },
          { name: '商机类型', value: 'type', type: 'text' },
          { name: '资源类型', value: 'resourceType', type: 'text' },
          { name: '跟进信息', value: 'followUpRemark', type: 'text' },
          { name: '处理状态', value: 'status', type: 'text', width: '200px' },
          { name: '处理备注', value: 'remark', type: 'text', width: '200px' },
        ]
      }
    },
    created() {
      this.dict = getDict(['商机类型', '会员等级', '客户类型'])
    },
    methods: {
      findDetails(row) {
        this.showDetailsVisible = true
        this.dialogData = row
      },
      findBusinessSet() {
        this.showDeleteVisible = true
      },
      handleDisposeDataChange(row) {
        this.showDisposeVisible = true
        this.dialogData = row
      },
      async handleSetDataOperate(row) {
        const { success } = await chanceSetChance(row)
        if (success) {
          this.$message.success('设置成功')
          this.showDeleteVisible = false
          this.setTableData()
        }
      },
      async handleDisposeDataOperate(row) {
        const { success } = await disposeChance(row)
        if (success) {
          this.$message.success('处理成功')
          this.showDisposeVisible = false
          this.setTableData()
        }
      },
      search(form) {
        this.searchOptions = {
          chanceType: form.chanceType,
          clientType: form.clientType,
          likeName: form.likeName,
          memberGrade: form.memberGrade
        }
        this.currentPage = 1
        this.setTableData()
      },
      businessSet() {
        alert(1)
      },
      interestsInfo(row, type){
        this.$store.state.carInfoId = row.id
        this.$store.state.carInfotype = type
        this.$router.push({ path: '/customer/carInfo' })
      },getAdverts(row){
        getcategory(row.id).then(result =>{
           if(result.code == "0"){
             this.advert = result.data;
             this.handleDataChange(row);
           }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .vLine {
    border-left: solid 3px black;
    height: 16px;
    vertical-align: bottom;
    display: inline-block;
  }
</style>
